<template>
    <el-dialog
            :modal="false"
            :title="`${mode === 'exam' ? '考试' : '学习'}结束`"
            :visible="results !== null"
            :close-on-click-modal="mode !== 'exam'"
            :close-on-press-escape="false"
            :show-close="mode !== 'exam'"
            @close="close"
            :width="width"
    >
        <span v-if="toggleShowResults && results && validExam">
            <el-row class="result-header" :gutter="20">
                <el-col :span="6">开始: {{ results.startTime }}</el-col>
                <el-col :span="6">结束: {{ results.endTime }}</el-col>
                <el-col :span="6">耗时(秒): {{ results.duration }}</el-col>
                <el-col :span="6">业务步骤总得分: {{ results.score }}</el-col>
            </el-row>
            <el-card class="result-card" v-for="(step, i) in results.steps" :key="i">
                <el-row slot="header" :gutter="20">
                    <el-col :span="8">步骤 - {{ i + 1 }}: {{ step.title }}</el-col>
                    <el-col :span="6">耗时(秒): {{ step.duration }}</el-col>
                    <el-col :span="6">步骤得分: {{ step.score }}</el-col>
                </el-row>
                <el-table :data="step.details" style="width: 100%" border="" :row-style="markError">
                    <el-table-column prop="name" label="物品/组件"></el-table-column>
                    <el-table-column prop="event" label="行为"></el-table-column>
                    <el-table-column prop="expect" label="正确结果"></el-table-column>
                    <el-table-column prop="result" label="实际结果"></el-table-column>
                    <el-table-column prop="score" label="得分"></el-table-column>
                </el-table>
            </el-card>
        </span>
        <span slot="footer" class="dialog-footer" v-if="!reviewResults">
            <el-button
                    v-if="(mode === 'study' || action === 'preview') && validExam && ableShowResults && toggleShowResults === false"
                    type="success"
                    @click="toggleShowResults = true"
            >{{`查看${mode === 'exam' ? '考试' : '学习'}结果`}}</el-button>
            <el-button
                    v-if="nextBusiness && validExam"
                    type="primary"
                    @click="next"
            >下一个业务: {{ nextBusiness.name }}</el-button>
            <el-button type="primary" @click="leave">{{mode === 'exam' ? '结束考试并离开' : '结束学习并离开'}}</el-button>
        </span>
    </el-dialog>
</template>
<script>
    import { mapState } from 'vuex'

    export default {
        name: 'exam-result',
        props: ['results', 'ableShowResults', 'reviewResults', 'mode', 'action'],
        data() {
            return {
                toggleShowResults: this.reviewResults ? this.reviewResults : false
            }
        },
        computed: {
            ...mapState('course', ['businessTemplate', 'businessTemplates']),
            width() {
                return (this.mode === 'study' || this.action === 'preview') ? '800px' : '300px'
            },
            validExam() {
                return this.results !== 'invalid_exam' || this.mode !== 'exam'
            },
            nextBusiness() {
                if (this.mode === 'exam') {
                    const index = this.businessTemplates.findIndex(temp => temp.id === this.businessTemplate.id)
                    if (index < this.businessTemplates.length - 1) {
                        return this.businessTemplates[index + 1]
                    } else {
                        return 0 // 显示考试已结束
                    }
                } else {
                    return null // 非考试不显示下一考试
                }
            }
        },
        methods: {
            next() {
                this.$emit('next', this.nextBusiness.id)
            },
            leave() {
                this.$emit('leave')
            },
            close() {
                this.$emit('close')
            },
            markError({ row, index }) {
                if (row.expect != row.result) {
                    return {
                        color: 'red'
                    }
                } else {
                    return {}
                }
            }
        }
    }
</script>
<style lang="less">
    .result-header {
        .el-col {
            text-align: center;
            font-weight: 700;
            font-size: 16px;
        }
    }

    .result-card {
        margin: 5px 0px;
    }
</style>


